<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
  <head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中智慧畜牧大数据云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="~{baseui/topheader :: topheader}"/>

<!--动检通菜单-->
<div id="topnav" th:replace="plantform/partial/topnav :: topnav(1)"></div>

	<div id="cl-wrapper">

        <th:block th:replace="plantform/partial/plantform_left :: nav(1)" />

		<div class="container-fluid" id="pcont">


		<div class="cl-mcont">

<div class="row">
       <div class="col-sm-6 col-md-6">

       <div class="block-flat">
       <div class="header">



                     <div class="btn-group pull-right">
                      <button type="button" class="btn btn-default">本日</button>
                       <button type="button" class="btn btn-default">本周</button>
                        <button type="button" class="btn btn-default">本月</button>
                        </div>
 <h4>产地检疫总体情况</h4>

       </div>
       <div class="content">




       						<div class="content no-padding">

       							<div class="fact-data text-center">

       								<h3><i class="fa fa-arrow-circle-o-right color-primary"></i>发起检疫申请数(次)</h3>
       								<h2>1,572</h2>
       							</div>
       							<div class="fact-data text-center">

       								<h3><i class="fa fa-arrow-circle-o-right color-danger"></i>动物申报数量(头)</h3>
       								<h2>2,372,348</h2>
       							</div>
       						</div>




       						<div class="content no-padding">

       						<table class="no-border hover">
                            								<thead class="no-border">
                            									<tr>
                            										<th style="width:40%;">类型</th>
                            										<th>数量</th>
                            										<th>占比</th>
                            										<th>同比</th>
                            										<th class="text-right">环比</th>
                            									</tr>
                            								</thead>
                            								<tbody class="no-border-y">
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-thumb-tack"></i>本地屠宰</td>
                            										<td>172,348</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-success"><i class="fa fa-angle-up"></i>48.06%</td>
                            									</tr>
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-mail-forward"></i> 销往外市</td>
                            										<td>124,621</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-danger"><i class="fa fa-angle-down"></i>48.06%</td>
                            									</tr>
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-check-square-o"></i> 合格数</td>
                            										<td>172,348</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-primary"><i class="fa fa-angle-right"></i>33%</td>
                            									</tr>
                            									<tr>
                                                                <td style="width:30%;"><i class="fa fa-ban"></i> 不合格数</td>
                                                                 <td>8</td>
                                                                 <td>13</td>
                                                                 <td>51.94%</td>
                                                                  <td class="text-right color-primary"><i class="fa fa-angle-right"></i>33%</td>
                                                                  </tr>
                            								</tbody>
                            							</table>
       						</div>


       </div>
       </div>

       <div class="block-flat">
       <div class="header">
        <div class="btn-group pull-right">
                             <button type="button" class="btn btn-default">本日</button>
                              <button type="button" class="btn btn-default">本周</button>
                               <button type="button" class="btn btn-default">本月</button>
                               </div>
       <h4>屠宰检疫总体情况</h4></div>
       <div class="content">

	<div class="content no-padding">

       							<div class="fact-data text-center">

       								<h3><i class="fa fa-bookmark-o color-primary"></i>发起屠宰申请数(次)</h3>
       								<h2>1,572</h2>
       							</div>
       							<div class="fact-data text-center">

       								<h3><i class="fa fa-bookmark-o color-danger"></i>动物屠宰数量(头)</h3>
       								<h2>2,372,348</h2>
       							</div>
  </div>




       						<div class="content no-padding">

       						<table class="no-border hover">
                            								<thead class="no-border">
                            									<tr>
                            										<th style="width:40%;">类型</th>
                            										<th>数量</th>
                            										<th>占比</th>
                            										<th>同比</th>
                            										<th class="text-right">环比</th>
                            									</tr>
                            								</thead>
                            								<tbody class="no-border-y">
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-thumb-tack"></i>本地屠宰</td>
                            										<td>172,348</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-success"><i class="fa fa-angle-up"></i>48.06%</td>
                            									</tr>
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-mail-forward"></i> 外地入场</td>
                            										<td>124,621</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-danger"><i class="fa fa-angle-down"></i>48.06%</td>
                            									</tr>
                            									<tr>
                            										<td style="width:30%;"><i class="fa fa-check-square-o"></i> 合格数</td>
                            										<td>172,348</td>
                            										<td>51.94%</td>
                            										<td>51.94%</td>
                            										<td class="text-right color-primary"><i class="fa fa-angle-right"></i>33%</td>
                            									</tr>
                            									<tr>
                                                                <td style="width:30%;"><i class="fa fa-ban"></i> 不合格数</td>
                                                                 <td>8</td>
                                                                 <td>13</td>
                                                                 <td>51.94%</td>
                                                                  <td class="text-right color-primary"><i class="fa fa-angle-right"></i>33%</td>
                                                                  </tr>
                            								</tbody>
                            							</table>
       						</div>

       </div>
       </div>

       </div>

       <div class="col-sm-6 col-md-6">
       <div class="block-flat">
       <div class="header"><h4>实时存栏量</h4></div>
       <div class="content">
       <div id="realamountChart" style="width: 540px;height:330px;"></div>
       </div>
       </div>

       <div class="block-flat">
       <div class="header"><h4>无害化一周处理趋势图</h4></div>
       <div class="content">
       <div id="harmlessChart" style="width: 540px;height:330px;"></div>
       </div>
       </div>
       </div>

       </div>

<!--预警信息-->
<div class="row">
<div class="col-md-12">
    <div class="block-flat">
        <div class="header">
        <h4>预警信息</h4>

        </div>
            <div class="content">

                        <div class="row">

                            <div class="col-md-6 col-sm-6">
                             <!--执法办案-->
 <div class="block-flat">
        <div class="header">

          <div class="pull-right">
         <button type="button" class="btn btn-success btn-xs"><i class="fa fa-mail-forward"></i> 更多</button>

           </div>
               <h4>执法办案</h4>

               </div>



            <div class="content">
                                <table class="no-border blue">
								<thead class="no-border">
									<tr>
									    <th>序号</th>
									    <th>区域</th>
									    <th>信息分类</th>
										<th style="width:30%;">详细</th>
										<th class="text-right">预警等级</th>
									</tr>
								</thead>
								<tbody class="no-border-x">
									<tr>
									    <td>1</td>
									    <td>上海 金山</td>
										<td>疫情</td>
										<td>发生蓝耳病疫情</td>
										<td class="text-right color-danger">高级</td>
									</tr>
										<tr>
                                        <td>2</td>
                                        <td>上海 金山</td>
                                        <td>疫情</td>
                                        <td>发生蓝耳病疫情</td>
                                        <td class="text-right">初级</td>
                                    </tr>
										<tr>
                                            <td>3</td>
                                            <td>上海 金山</td>
                                            <td>疫情</td>
                                            <td>发生蓝耳病疫情</td>
                                            <td class="text-right">初级</td>
                                            </tr>
                                                <tr>
                                                <td>4</td>
                                                <td>上海 金山</td>
                                                <td>疫情</td>
                                                <td>发生蓝耳病疫情</td>
                                                <td class="text-right">初级</td>
                                            </tr>
                                                <tr>
                                            <td>5</td>
                                            <td>上海 金山</td>
                                            <td>疫情</td>
                                            <td>发生蓝耳病疫情</td>
                                            <td class="text-right">初级</td>
                                        </tr>
                        </tbody>
							</table>

             </div>

    </div>


                            </div>

                            <div class="col-md-6 col-sm-6">
                            <!--无害化处理-->
                            <div class="block-flat">
                                   <div class="header">
                                      <div class="pull-right">
                                   <button type="button" class="btn btn-success btn-xs"><i class="fa fa-mail-forward"></i> 更多</button>
                                              </div>
                                   <h4>无害化处理</h4>

                                   </div>
                                       <div class="content">

                                            <table class="no-border blue">
                                      								<thead class="no-border">
                                      									<tr>
                                      									    <th>序号</th>
                                      									    <th>区域</th>
                                      									    <th>信息分类</th>
                                      										<th style="width:30%;">详细</th>
                                      										<th class="text-right">预警等级</th>
                                      									</tr>
                                      								</thead>
                                      								<tbody class="no-border-x">
                                      									<tr>
                                      									    <td>1</td>
                                      									    <td>上海 金山</td>
                                      										<td>疫情</td>
                                      										<td>发生蓝耳病疫情</td>
                                      										<td class="text-right">初级</td>
                                      									</tr>
                                      										<tr>
                                                                          									    <td>2</td>
                                                                          									    <td>上海 金山</td>
                                                                          										<td>疫情</td>
                                                                          										<td>发生蓝耳病疫情</td>
                                                                          										<td class="color-warning text-right">中级</td>
                                                                          									</tr>
                                      										<tr>
                                                                                  <td>3</td>
                                                                                  <td>上海 金山</td>
                                                                                  <td>疫情</td>
                                                                                  <td>发生蓝耳病疫情</td>
                                                                                  <td class="text-right">初级</td>
                                                                                  </tr>
                                                                                      <tr>
                                                                                      <td>4</td>
                                                                                      <td>上海 金山</td>
                                                                                      <td>疫情</td>
                                                                                      <td>发生蓝耳病疫情</td>
                                                                                      <td class="text-right">初级</td>
                                                                                  </tr>
                                                                                      <tr>
                                                                                  <td>5</td>
                                                                                  <td>上海 金山</td>
                                                                                  <td>疫情</td>
                                                                                  <td>发生蓝耳病疫情</td>
                                                                                  <td class="text-right">初级</td>
                                                                              </tr>
                                                              </tbody>
                                      							</table>

                                        </div>

                               </div>
                            </div>

                        </div>

             </div>

    </div>


</div>
</div>

<!--畜产品追溯-->
<div class="row">
<div class="col-md-12">
    <div class="block-flat">
        <div class="header">
        <h4>畜产品溯源</h4>


        </div>
            <div class="content">

                        <div class="row">

             <form action="#" novalidate="" class="form-horizontal group-border-dashed">
             <div class="form-group"><label class="col-sm-3 control-label">按养殖场追溯</label>

             <div class="col-sm-6">


<div class="col-sm-3">
                             <select class="select2">
                             <option value="所有区域">所有区域</option>
                                                 <optgroup label="襄阳市">
                                                   <option value="南漳县">南漳县</option>
                                                   <option value="其它县">其它县</option>
                                                 </optgroup>
                              </select>
 </div>
<div class="col-sm-3">

                                <select class="select2">
                                <option value="所有区域">所有区域</option>
                                     <optgroup label="南漳县">
                                      <option value="九集镇">九集镇</option>
                                       <option value="其它镇">其它镇</option>
                                       </optgroup>

                              </select>

</div>
<div class="col-sm-6">
                         <select class="select2">

                                  <option value="养殖场名称">养殖场名称</option>

                          </select>
</div>



                             </div>

             <div class="col-sm-3">
             <button type="button" class="btn btn-primary">确定</button>
             </div>

             </div>


             <div class="form-group">
             <label class="col-sm-3 control-label">按耳标号追溯</label>
             <div class="col-sm-6"><input type="text" placeholder="请输入耳标号" class="form-control"></div>
             <div class="col-sm-3">
                          <button type="button" class="btn btn-primary">确定</button>
                          </div>
             </div>

             <div class="form-group">
             <label class="col-sm-3 control-label">按证号追溯</label>
             <div class="col-sm-6"><input type="text"  placeholder="请输入AB证号" class="form-control"></div>
             <div class="col-sm-3">
               <button type="button" class="btn btn-primary">确定</button>
               </div>
             </div>

             </form>

                        </div>

             </div>

    </div>


</div>
</div>
     <!--end-->
		</div>

	</div>

  <script type="text/javascript" src="/webjars/js/jquery.js"></script>


  <script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
	<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
  <script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
  <script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>

	<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
  <script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

  <script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
  <script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
 <script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>

  <script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

      App.init();



    });
  </script>

<script type="text/javascript">
// ------实时存栏量-----
        var realamountChart = echarts.init(document.getElementById('realamountChart'));

        // 实时存栏量
      option = {

          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              data: ['猪', '牛','羊','家禽'],
               selected: {
                              '家禽': false
                          }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
          },
          yAxis: {
              type: 'category',
              data: ['宝山','金山','杨浦','静安','浦东','总存栏量(万)']
          },
          series: [
              {
                  name: '猪',
                  type: 'bar',
                  data: [18203, 23489, 29034, 104970, 131744, 630230]
              },
              {
                  name: '牛',
                  type: 'bar',
                  data: [19325, 23438, 31000, 121594, 134141, 681807]
              }
              ,
               {
                  name: '羊',
                  type: 'bar',
                  data: [19325, 23438, 31000, 121594, 134141, 681807]
               }
               ,
                {
                name: '家禽',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
                }
          ]
      };


        // 实时存栏量。
        realamountChart.setOption(option);



       //--------------------无害化处理趋势图------------------------------

        var harmlessChart = echarts.init(document.getElementById('harmlessChart'));
        option = {

                 tooltip: {
                     trigger: 'axis'
                 },
                 legend: {
                     data:['合计总数','集中处理','焚烧','化制','掩埋','发酵','其它'],
                      selected: {
                        '集中处理': false,'焚烧':false,'化制':false,'掩埋':false,'发酵':false,'其它':false
                     }
                 },
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 toolbox: {
                     feature: {
                         saveAsImage: {}
                     }
                 },
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
                     data: ['周一','周二','周三','周四','周五','周六','周日']
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series: [
                  {
                     name:'合计总数',
                      type:'line',

                     data:[920, 1032, 1201, 1234, 2290, 2330, 2320]

                      },
                     {
                         name:'集中处理',
                         type:'line',

                         data:[120, 132, 101, 134, 90, 230, 210]

                     },
                     {
                         name:'焚烧',
                         type:'line',

                         data:[220, 182, 191, 234, 290, 330, 310]
                     },
                     {
                         name:'化制',
                         type:'line',

                         data:[150, 232, 201, 154, 190, 330, 410]
                     },
                     {
                         name:'掩埋',
                         type:'line',

                         data:[320, 332, 301, 334, 390, 330, 320]
                     },
                     {
                         name:'发酵',
                         type:'line',

                         data:[820, 932, 901, 934, 1290, 1330, 1320]
                     }
                     ,
                      {
                       name:'其它',
                       type:'line',

                       data:[820, 932, 901, 934, 1290, 1330, 1320]

                      }
                 ]
             };
 harmlessChart.setOption(option);



    </script>

  </body>
</html>
